<template>
    <a-input style="margin-bottom: 20px;" v-model:value="title" placeholder="请填写协议标题"></a-input>
    <div style="border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
            :mode="mode" />
        <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
            :mode="mode" @onCreated="handleCreated" />
    </div>
    <a-button type="primary" style="margin-top: 20px;" :loading="saveLoading" @click="onSubmit">保存</a-button>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { baseAPI } from '@/api/api.js'
import { message } from 'ant-design-vue'

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('')
const title = ref('')
const id = ref('')
const saveLoading = ref(false)
const loading = ref(false)

function loadAgreement() {
    loading.value = true
    baseAPI.get('agreement/getAgreement', {
        id: '1'
    }).then(function (response) {
        if (response && response.result) {
            const data = response.result
            id.value = data.id || ''
            title.value = data.title || ''
            valueHtml.value = data.content || ''
        }
    })
        .catch(function (error) {
            message.error('加载失败：' + (error?.message || '未知错误'))
        })
        .finally(function () {
            loading.value = false
        })
}

const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }
const mode = 'default'

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}

function onSubmit() {
    if (!title.value || !title.value.trim()) {
        message.warning('请填写标题')
        return
    }

    saveLoading.value = true
    const payload = {
        id: "1",
        title: title.value.trim(),
        content: valueHtml.value
    }

    baseAPI.post('agreement/saveAgreement', payload)
        .then(function (response) {
            if (response.code === 200) {
                message.success('保存成功')
            }
        }).finally(function () {
            saveLoading.value = false
        })
}

onMounted(() => {
    loadAgreement()
})
</script>